<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title>千图网-一个神奇的网站</title>
    <style>
        *{
            box-sizing: border-box;
        }
      body{
          margin: 0;
      }
      ul{
          margin: 0;
          padding: 0;
          list-style: none;
      }
      .nav{
          
          width: 100%;
          height: 50px;
          background-color: #10c55b;
      }
      .kuang{
           width: 1200px; 
          height: 50px;
          margin: 0 auto;
          /* background-color: red; */
          /* display: flex; */
      }
      .kuang .left{
          float: left;
      }
      .kuang .right{
          float: right;

      }
      .kuang ul li{
          float: left;
          margin-left: 20px;
          padding: 0 15px;
      }
      .kuang ul li a{
          display: inline-block;
          color: white;
          text-decoration: none;
          font-size: 15px;
          line-height: 50px;
      }
      .left ul li:nth-child(1){
          background-color: #01ac48;
      }
      .right ul li:nth-child(2){
          background-color: #01ac48;
          border: 1px solid #01ac48;
          border-radius: 5px;
      }
      .arrows{
          display: inline-block;
          color: white;
          transform: rotate(90deg);
      }
      .qiantu .dakuang{
           width: 1200px; 
          height: 120px;
            /* background-color: yellow;   */
          margin: 20px auto;
          display: flex;
          
      }
      .qiantu .dakuang .shuru{
          width: 800px;
          height: 60px;
          border: 1px solid black;
          margin-top: 10px;
          margin-left: 80px;
          border-radius: 10px;
      }
      .shuru span{
          float: left;
      }
      .shuru div{
          float: right;
          border: 1px solid green;
          border-radius: 10px;
      }
      .shuru div button{
          width: 70px;
          height: 60px;
          background-color: #11cc5e;
      }
      .shuru input{
          border: 0;
          width: 400px;
          height: 50px;
          margin-top: 3px;
          margin-left: 10px;
      }
      .qiantu .dakuang .shuru .sousuo{
          /* width: 600px; */
          height: 20px;
          /* background-color: pink; */
          display: flex;
          margin-top: 10px;
          justify-content: space-between;
      }
      .qiantu .dakuang .shuru .sousuo li{
          font-size: 13px;
      }
      .qiantu .dakuang .shuru .sousuo li:nth-child(2){
          color: #30cd71;
      }
      .qiantu .dakuang .shuru .sousuo li:nth-child(4){
          color: #30cd71;
      }
      .qiantu .dakuang .shuru .sousuo li:nth-child(6){
          color: #30cd71;
      }
      .qiantu .dakuang .shuru .sousuo li:nth-child(7){
          color: #30cd71;
      }
      .qiantu .dakuang .shuru .sousuo li:nth-child(11){
          color: #30cd71;
      }
    .box{
        width: 100%;
        height: 320px;
        position: relative;
    }
    .img-list li{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
     .img-list li img{
        width: 100%;
        height: 320px;
    } 
    .img-list li.current{
        display: block;
    }
      .indicator{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        display: flex;
        justify-content: center;
        color: white;
      }
      .indicator li{
        width: 20px;
        height: 20px;
        background-color: #aaa;
        text-align: center;
        line-height: 20px;
        margin: 0 5px;
        border-radius: 50%;
        cursor: pointer;
      }
       .indicator li.active{
           background-color: red;
       }
      .img-click span{
        width: 50px;
        height: 100px;
        line-height: 100px;
         text-align: center; 
        color: white;
        background-color: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: calc(50% - 20px);
        /* display: none; */
    
    }
    .img-click span:hover{
        background-color: orange;
        cursor: pointer;
    }
    .img-click .prev{
        left: 0;
        font-size: 20px;
        text-align: center;
    }
    .img-click .next{
        right: 0;
        font-size: 20px;
        text-align: center;
    }
    .zhuanti .baoguo{
        width: 1200px;
        height: 60px;
        margin: 20px auto;
        /* background-color: green; */
        display: flex;
    }
    .baoguo .two{
        width: 900px;
        display: flex;
        margin-left: 30px;
    }
    .baoguo .two h2 img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -95px -415px;  
    }
    .baoguo .two h2{
        color: #666666;
    }
    .baoguo .two p{
        font-size: 13px;
        margin-left: 20px;
        margin-top: 30px;
        color: #888888;
    }
    .baoguo .three{
        width: 100px;
        margin-top: 10px;
        margin-left: 350px;;
    }
    .tupian .guo{
        width: 1200px;
        height: 200px;
         /* background-color: blue;  */
        margin: 0 auto;
        
    }
   
    .tupian .guo ul{
        display: flex;
    }
    .tupian .guo ul li{
        width: 300px;
        height: 200px;
        /* display: inline-block; */
        
    }
    .haibao .aa{
        width: 1200px;
        height: 60px;
        margin: 20px auto;
        /* background-color: green; */
        display: flex;
    }
    .haibao .four{
        width: 900px;
        display: flex;
        margin-left: 30px;
    }
    .haibao .four h2 img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -125px -415px;  
    }
    .haibao .four h2{
        color: #666666;
    }
    .aa .four p{
        font-size: 13px;
        margin-left: 20px;
        margin-top: 30px;
        color: #888888;
    }
    .aa .five{
        width: 100px;
        margin-top: 10px;
        margin-left: 350px;;
    }
    .tupiantwo .guotwo{
        width: 1200px;
        height: 420px;
        margin: 0 auto;
        /* background-color: goldenrod; */
    }
    .tupiantwo .guotwo ul{
        display: flex;
    }
    .tupiantwo .guotwo ul li{
        width: 300px;
        height: 200px;
        /* display: inline-block; */
        
    }
    .xia{
        width: 100%;
        height: 320px;
         background-color: #f6f6f6; 
        margin-top: 20px;
        
        
        /* position: fixed; */
    }
    .xia .xiaoone{
        width: 1200px;
        height: 220px;
        /* background-color: red; */
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .xia .xiaotwo{
        width: 1200px;
        height: 60px;
        /* background-color: green; */
        margin: 40px auto;
        display: flex;
        justify-content: space-between;
    }
    .xia .xiaoone .aaa{
        width: 550px;
        height: 220px;
        /* background-color: blue; */
        display: flex;
        justify-content: space-between;
    }
    .xia .xiaoone .bbb{
        width: 300px;
        height: 220px;
        /* background-color: gray; */
    }
    .xia .xiaoone .bbb ul .sishi img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -60px -170px; 
    }
    .xia .xiaoone .bbb ul .fee img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -30px -169px; 
    }
    .xia .xiaoone .bbb button{
        width: 130px;
        height: 45px;
        background-color: #10c75c;
        border: 1px solid #10c75c;
        border-radius: 10px;
        margin-top: 20px;
        margin-left: 30px;
        text-align: center;
    }
    .xia .xiaoone .bbb button img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: 0 -172px; 
    }
    .xia .xiaotwo .ccc{
        width: 320px;
        height: 60px;
        /* background-color: gray; */
        display: flex;
    }
    .xia .xiaotwo .ccc ul{
        font-size: 13px;
        display: flex;
        margin-left: 30px;
        color: #333333;
        margin-top: 20px;
        justify-content: space-between;
    }
    .xia .xiaotwo .ccc ul li{
        margin-right: 15px;
    }
    .xia .xiaotwo .ddd{
        width: 650px;
        height: 60px;
        /* background-color: red; */
    }
    .xia .xiaotwo .ccc .oa img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -60px -200px;
        margin-top: 15px;
    }
    .xia .xiaotwo .ccc .ob img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -30px -200px;
        margin-top: 15px;
    }

    .xia .xiaotwo .ddd ul li img{
        display: inline-block;
        background-image: url(img/common.png);
        width: 30px;
        height: 25px;
        background-position: -160px -20px;
        margin-top: 15px;
    }
    .xia .xiaotwo .ddd ul{
        display: flex;
    }
    .xia .xiaotwo .ddd ul li{
        font-size: 15px;
        margin-left: 5px;
        margin-top: 20px;
    }
    .xia .xiaotwo .ddd ul li:nth-child(5){
        margin-top: -3px;
    }
    </style>
</head>
<body>
    <!--导航栏  -->
   <header class="nav">
       <div class="kuang">
        <div class="left">
           <ul >
               <li><a  herf="">首页</a></li>
               <li><a  herf="">所有分类</a><span class="arrows">&gt;</span></li>
               <li><a  herf="">设计创意</a></li>
               <li><a  herf="">办公创意</a></li>
               <li><a  herf="">...</a></li>
           </ul>
       </div>
        <div class="right">
            <ul >
               <li></sapn><a href="http://www.58pic.com">vip中心</a></li> 
                <li><a href="www.58pic.com/login">请登录</a></li>
                <li><a href="http://www.58pic.com/enroll">免费注册</a></li>
            </ul>
            </div>
        </div>
   </header>
   <!--千图网  -->
   <section class="qiantu">
       <div class="dakuang">
         <div class="tp">
             <img src="img/2.png" alt="">
         </div>
            <!--搜索框  -->
            <div class="shuru">
                <sapn>全站&#x3000;|</sapn>
                <input type="" name="" value="">
                <div >
                    <button type=""></button>
                </div>
                <ul class="sousuo">
                <li><a href="">热门搜索：</a></li>
                <li><a href="#">七夕</a></li>
                <li><a href="">详情页</a></li>
                <li><a href="#">icon</a></li>
                <li><a href="">主图</a></li>
                <li><a href="#">秋季</a></li>
                <li><a href="#">PPT模版</a></li>
                <li><a href="">EXCLE模版</a></li>
                <li><a href="">首页</a></li>
                <li><a href="">个人简历</a></li>
                <li><a href="#">装饰图</a></li>
            </ul>
            </div>
            
       </div>
   </section>
   <!--轮播图  -->
   <div class="box">
       <ul class="img-list">
           <li class="current"><a href=""><img src="img/banner01.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner02.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner03.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner04.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner05.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner06.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner07.jpg" alt=""></a></li>
           <li><a href=""><img src="img/banner08.jpg" alt=""></a></li>
       </ul>
        <ul class="indicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
   </div>
    <!--专题栏  -->
    <div class="zhuanti">
        <div class="baoguo">
            <ul class="two">
                <h2><img src="" alt="">&#x3000;精选专题</h2>
                <p>100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</p>
            </ul>
            <ul class="three">
                <p>更多&gt;&gt;</p>
            </ul>
        </div>
    </div>
    <!--四张图片  -->
    <div class="tupian">
        <div class="guo">
            <ul>
                <li><img src="img/jxzt01.jpg" alt=""></li>
                <li><img src="img/jxzt02.jpg" alt=""></li>
                <li><img src="img/jxzt03.jpg" alt=""></li>
                <li><img src="img/jxzt04.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <!--商用海报  -->
    <div class="haibao">
        <div class="aa">
            <ul class="four">
                <h2><img src="" alt="">&#x3000;商用海报</h2>
                <p>招聘海报</p>
                <p>配图海报</p>
                <p>企业文化</p>
                <p>促销海报</p>
            </ul>
            <ul class="five">
                <p>更多&gt;&gt;</p>
            </ul>
        </div>
    </div>
    <!--第二行图片  -->
    <div class="tupiantwo">
        <div class="guotwo">
            <ul>
                <li><img src="img/syhb01.jpg" alt="">超清新雪糕夏日凉爽海报</li>
                <li><img src="img/syhb02.jpg" alt="">文艺夏日时光菠萝蓝色简约海报</li>
                <li><img src="img/syhb03.jpg" alt="">七夕情人节特别定制版海报</li>
                <li><img src="img/syhb04.jpg" alt="">我的前半生情感配图海报设计</li>
            </ul>
        </div>
    </div>
    <!-- 最下面  -->
    <div class="xia">
        <div class="xiaoone">
          <div class="aaa">
              <ul>
                  <h3>常见问题</h3>
                  <li>成为特邀设计师</li>
                  <li>注册登录</li>
                  <li>帐号/密码</li>
                  <li>成为原创贡献者</li>
                  <li>充值/售后</li>
                  <li>版权投诉</li>
              </ul>
                <ul>
                   <h3>关于千图网</h3>
                   <li>关于我们</li>
                   <li>媒体报道</li>
                   <li>加入我们</li>
                   <li>心系千图</li>
                   <li>每日更新</li>
                </ul>
                <ul>
                    <h3>产品服务</h3>
                    <li>官方微博</li>
                    <li>帮助中心</li>
                    <li>千图导航</li>
                </ul>
                <ul>
                    <h3>友情链接</h3>
                    <li>我图网</li>
                    <li>千库网</li>
                    <li>摄图网</li>
                    <li>包图网</li>
                    <li>视达网</li>
                    <li>更多&gt;&gt;</li>
                </ul>
          </div>
          <div class="bbb">
              <ul>
                  <h2>客服咨询</h2>
                  <li class="sishi"><img src="" alt="">400-998-7011 （9:00-18:00）</li>
                  <li class="fee"><img src="" alt="">feedback@58pic.com</li>
              </ul>
                <button type=""><img src="" alt="">点我交谈</button>
          </div>
        </div>
        <div class="xiaotwo">
           <div class="ccc">
               <section class="oa"><img src="" alt=""></section>
               <section class="ob"><img src="" alt=""></section>
               <ul>
                   <li>注册声明</li>
                   <li>版权声明</li>
                   <li>售后服务</li>
               </ul>
           </div>
           <div class="ddd">
               <ul>
                   <li>Copyright</li>
                   <li>©2013-2017 </li>
                   <li>千图网</li>
                   <li><a href="">沪ICP备10011451号-6</a></li>
                   <li><a href=""><img src="" alt=""></a>上海工商</li>
                   <li>安全实名验证</li>
                   <li>信用网站</li>
               </ul>
           </div>
        </div>
    </div>
</body>
</html>
<script>
window.onload = function(){
    // 第一步 找标签
    var box = document.querySelector('.box');
    var imgLis = document.querySelectorAll('.img-list li');
    var indicatorLis = document.querySelectorAll('.indicator li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    
    var index = 0;//当前的索引值
    // 上一张
    function prevImg() {
        index = index==0 ? index=imgLis.length-1 : index-1;
        showImg();
    }
    // 下一张
    function nextImg() {
        index = index==imgLis.length-1 ? 0 : index+1;
        showImg();
    }
    // 展示图片
    function showImg(){
        for(var i = 0; i < imgLis.length; i++){
            imgLis[i].className = '';
            indicatorLis[i].className = '';
        }
        console.log(index);
        imgLis[index].className = 'current';
        indicatorLis[index].className = 'active';
    }

    // 1.自动切换图片
    var timer = setInterval(nextImg,1000);

    // 2.图片跟随指示灯切换
    for(var i = 0; i < indicatorLis.length; i++){
        indicatorLis[i].index = i;
        indicatorLis[i].onmouseover = function(){
            // 鼠标进来，暂停自动切换
            clearInterval(timer);
            timer = null;
            // 根据鼠标选中的指示灯的索引来切换图片
            // 并记录和更新 index 的值
            index = this.index;
            showImg();
        }
        indicatorLis[i].onmouseout = function(){
            // 鼠标出去，开始自动切换
            if(timer) return;
            // if (timer != null) {
            //     return;
            // }
            timer = setInterval(nextImg,1000);
        }
    }

    // 3.点击按钮切换
    box.onmouseover = function(){
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style.display = 'block';
    }
    box.onmouseout = function(){
        if(timer) return;
        timer = setInterval(nextImg,1000);
        prev.style.display = 'none';
        next.style.display = 'none';
    }
    // 点击 上一张
    prev.onclick = function(){
        prevImg();
    }
    // 点击 下一张
    next.onclick = function(){
        nextImg();
    }


}
</script>